<script setup lang="ts">
import { ref } from 'vue'
import { reqAllRole, reqAssignRole } from '@/api/user'
import { ElMessage } from 'element-plus'
import type { SetRoleData, User, UserRole } from '@/api/user/type.ts'

const $emit = defineEmits(['get-user-list'])

const show = ref<boolean>(false)

const username = ref<string>('')
let setRoleData: SetRoleData = {
  userId: '',
  roleIdList: [],
}

let allRoleList: UserRole[] = []
let allRoleIdList: number[] = []
const assignRoleIdList = ref<number[]>([])

const checkAll = ref<boolean>(false)
const isIndeterminate = ref<boolean>(true)

const initRole = (user: User) => {
  setRoleData.userId = user.id
  username.value = user.username as string
  getAllRole(user.id as number)
  show.value = true
}

const getAllRole = async (userId: number) => {
  try {
    const { code, data, message } = await reqAllRole(userId)
    if (code == 200) {
      allRoleList = data?.allRolesList
      allRoleIdList = allRoleList.map((role) => role?.id) as number[]
      assignRoleIdList.value = data?.assignRoles.map(
        (role) => role.id,
      ) as number[]
      handleCheckedRoleChange(assignRoleIdList.value)
    } else {
      ElMessage.error(message)
    }
  } catch (err: any) {
    ElMessage.error(err?.message)
  }
}

const handleCheckAllChange = (value: any) => {
  assignRoleIdList.value = value ? allRoleIdList : []
  isIndeterminate.value = false
}

const handleCheckedRoleChange = (value: any[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount == allRoleIdList.length
  isIndeterminate.value =
    checkedCount > 0 && checkedCount < allRoleIdList.length
}

const onConfirm = async () => {
  setRoleData.roleIdList = assignRoleIdList.value
  try {
    const { code, message } = await reqAssignRole(setRoleData)
    if (code == 200) {
      ElMessage.success('分配角色成功')
      $emit('get-user-list')
      show.value = false
    } else {
      ElMessage.error(message)
    }
  } catch (err: any) {
    ElMessage.error(err?.message)
  }
}

const onCancel = () => {
  show.value = false
}

defineExpose({
  initRole,
})
</script>

<template>
  <el-drawer v-model="show">
    <template #header>
      <h4>分配角色</h4>
    </template>
    <template #default>
      <el-form label-width="80">
        <el-form-item label="用户名">
          <el-input v-model="username" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色列表">
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          >
            全选
          </el-checkbox>
          <el-checkbox-group
            v-model="assignRoleIdList"
            @change="handleCheckedRoleChange"
          >
            <el-checkbox
              v-for="role in allRoleList"
              :key="role?.id"
              :label="role?.id"
            >
              {{ role?.roleName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button type="primary" @click="onConfirm">确认</el-button>
      <el-button @click="onCancel">取消</el-button>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss"></style>
